<template>
  <div class="evaluate-tags">
    <span
      class="tag"
      :class=" item.ischecked === true ? 'active' : ''"
      v-for="(item, index) in tags"
      :key="index"
      @click="changeChecked(item, index)"
      >{{ item.val }}
    </span>
    <input
      ref="inputDom"
      v-if="showInput"
      @blur="hide()"
      type="text"
      placeholder="请输入标签"
      v-model="customInputVal"
      @keyup.enter="$refs.input.blur()"
    />
    <span v-else @click="show()" class="tag">+自定义</span>
  </div>
</template>

<script>
import { reactive, ref, nextTick } from 'vue'
export default {
  name: 'EvaluateTag',
  props: {
    modelValue: {
      type: Array,
      default: () => ([])
    }
  },
  setup (props, { emit }) {
    const tags = reactive([
      { val: '穿着舒服', ischecked: false },
      { val: '漂亮精致', ischecked: false },
      { val: '简单大气', ischecked: false },
      { val: '尺寸适合', ischecked: false },
      { val: '性价比高', ischecked: false },
      { val: '值得拥有', ischecked: false },
      { val: '快递给力', ischecked: false },
      { val: '材质不错', ischecked: false }
      // '漂亮精致',
      // '简单大气',
      // '尺寸适合',
      // '性价比高',
      // '值得拥有',
      // '快递给力',
      // '材质给力'
    ])
    const checkedArr = reactive([])
    // 定义一个跟ref同名的变量，return出去时会自动绑定同名的dom 用于获取input 组件根元素
    const inputDom = ref(null)
    // 是否显示输入框
    const showInput = ref(false)
    // 自定义输入内容
    const customInputVal = ref(null)
    const show = () => {
      showInput.value = true
      nextTick(() => {
        // input.value就是这个dom
        inputDom.value.focus()
      })
    }
    const hide = () => {
      showInput.value = false
      // 如果input有值
      if (customInputVal.value) {
        // 向数组添加对象并使添加的对象支持双向响应的方法：对象需要以键值对形式添加，而不是对象形式
        // 将输入的内容赋值给与已经定义的tags对象数组中的val
        tags.push({
          val: customInputVal.value,
          ischecked: false
        })
        // 将输入的value赋值为空
        customInputVal.value = ''
      }
    }
    const changeChecked = (item, index) => {
      const arr = [...tags]
      if (arr[index].ischecked === false) {
        arr[index].ischecked = true
        checkedArr.push(item.val)
        emit('update:modelValue', checkedArr)
      } else {
        arr[index].ischecked = false
        const index1 = checkedArr.indexOf(index)
        checkedArr.splice(index1, 1)
        emit('update:modelValue', checkedArr)
      }
    }
    return { tags, inputDom, showInput, customInputVal, show, hide, checkedArr, changeChecked }
  }
}
</script>

<style lang="less" scoped>
.evaluate-tags {
  .tag {
    padding: 2px 13px;
    border: 1px solid #e4e4e4;
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    &:hover,
    &.active {
      border-color: @xtxColor;
      color: @xtxColor;
    }
  }
  input {
    width: 84px;
    height: 26px;
    border: 1px solid #e4e4e4;
    padding: 0 5px;
  }
}
</style>
